<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>033-flex布局_伸、缩</title>
		<style>
			.box {
				width: 600px;
				height: 600px;
				border: 1px solid #000;
				display: flex;
			}

			.item {
				width: 100px;
				height: 100px;
				background-color: skyblue;
				border: 1px solid #000;

				/* 【设定拉伸】元素自身已有长度不变，将剩余空间均分加到元素已有长度之上。默认值为0，表示元素不会拉伸。 */
				/* flex-grow: 1; */

				/* 【设定收缩】默认值为1，不换行的情况下，元素会进行收缩；设为0表示当父元素宽度不足时，子项目也不进行收缩，保持原有长度。 */
				/* flex-shrink: 0; */

				/* 复合属性：flex-grow, flex-shrink, flex-basis 的简写形式 */

				flex: 1 1 100px; /*  简写形式： flex: 1 1 100px; => flex: auto; */

				/* flex: 1 1 0; 简写形式： flex: 1 1 0; => flex: 1; */
			}

			.item2 {
				width: 200px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item">1</div>
			<div class="item item2">2</div>
			<div class="item">3</div>
		</div>
	</body>
</html>
